<template>
  <u-overlay
    :show="show"
    :opacity="0.98"
    style="pointer-events: none"
    ref="overlay"
  >
    <view class="wrap">
      <view class="time-tick">
        <text>广告</text>
        <text class="time-tick__seconds">{{ seconds }} 秒</text>
      </view>
      <FullscreenAdItem class="ad-item" :data="adData" @click.native="adClick"/>
      <view class="bottom-layout">
        <view style="display: flex; justify-content: flex-end">
          <text class="btn-skip" @click="skipHandler">跳过</text>
        </view>
        <view class="bottom-layout__logo">
          <u-image
            :src="appIcon"
            mode="widthFix"
            width="80rpx"
            height="80rpx"
            radius="50%"
          ></u-image>
          <text>{{appName}}</text>
        </view>
      </view>
    </view>
  </u-overlay>
</template>

<script>
import FullscreenAdItem from "./FullscreenAdItem.vue";
import https_1 from "@/api/https";
export default {
  name: "fullscreen-ad",
  components: { FullscreenAdItem },
  data() {
    return {
      seconds: 30,
      show: false,
      adIdList: ["CHARGING_OPEN_AD"],
      adData: {},
      appName: app.globalData.wxAppName,
      appIcon: '',
    };
  },
  created() {
    this.getAd();
    this.appIcon = uni.getStorageSync('mobilePlatformLogo')
  },
  methods: {
    skipHandler() {
      this.show = false;
    },
    showAd() {
      let oldDate = uni.getStorageSync("ad-day");
      let date = new Date();
      const day = this.$u.timeFormat(date, "yyyymmdd");
      if (!oldDate || day > oldDate) {
        uni.setStorageSync("ad-day", day);
        this.show = true;
        this.timeTick();
        return;
      }
    },
    timeTick() {
      if (this.timer) return;
      this.timer = setInterval(() => {
        this.seconds -= 1;
        if (this.seconds <= 0) {
          clearInterval(this.timer);
          this.show = false;
        }
      }, 1000);
    },
    getAd() {
      https_1.getMemberAddr().then((res) => {
        let IP = res.data;
        if (IP) {
          let { adIdList } = this;
          adIdList.forEach((AdvertisementType) => {
            https_1
              .getAdvertise({
                AdvertisementType, //广告位ID
                IP, //客户端IP ,用户的真实ip
                Pid: "89F47359C5AD469CA84836B32EFBAE33", //车场ID
                partnerId: "8830434570", // 流量主ID
                gridId: "350100202407023262", // 场地ID
                adPosId: "3", // 3:输入车牌；4:支付页
                medium: "2", // 1-公众号;2-小程序;3-APP:4-支付宝生活号
              })
              .then((res) => {
                if (res.code == 0 && res.data && res.data.code == 200) {
                  this.adData = res.data.data;
                  this.showAd();
                }
              });
          });
        }
      });
    },
    adClick(){
      if(!this.adData.jumpUrl) return
      uni.navigateTo({
				url: `/pages/webViewPage/webViewPage?src=${encodeURIComponent(this.adData.jumpUrl)}`
			});
    }
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: white;
  padding: calc(var(--status-bar-height) + 50rpx) 24rpx 0;

  .time-tick {
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 6rpx 12rpx;
    border-radius: 100rpx;
    font-size: 26rpx;
    &__seconds {
      margin-left: 12rpx;
      padding-left: 12rpx;
      border-left: 1rpx solid rgba(255, 255, 255, 0.2);
    }
  }

  .ad-item {
    width: 100%;
    background-color: #fff;
    border-radius: 20rpx;
    margin-top: 100rpx;
    flex: 1;
    overflow: hidden;
  }

  .bottom-layout {
    display: flex;
    flex-direction: column;
    padding-bottom: calc(var(--window-bottom) + 24rpx);
    padding-top: 150rpx;
    width: 100%;

    .btn-skip {
      padding: 8rpx 28rpx;
      border: 1rpx solid rgba(255, 255, 255, 0.2);
      border-radius: 100rpx;
      margin-bottom: 40rpx;
      font-size: 28rpx;
    }

    &__logo {
      display: flex;
      flex-direction: column;
      align-items: center;
      row-gap: 12rpx;
    }
  }
}
</style>
